<template>
  <div>
    <b-nav justified tag="div" class="fixed-bottom bg-light">
      <b-nav-item v-for="(item, index) in items" :class="{active: index == currentBar}"
                  @click="onClick(index)">
        <b-icon :icon="item.icon"></b-icon>
        <div class="title">{{item.title}}</div>
      </b-nav-item>
    </b-nav>
  </div>
</template>

<script>
  export default {
    name: "CgqNav",
    data() {
      return {
        items: [
          {
            title: "书架",
            icon: "bookshelf"
          },
          {
            title: "通讯录",
            icon: "person-lines-fill"
          },
          {
            title: "发现",
            icon: "compass"
          },
          {
            title: "我",
            icon: "person"
          }
        ],
        currentBar: 0
      }
    },
    methods: {
      onClick(index) {
        this.currentBar = index
      }
    }
  }
</script>

<style scoped>
  .title {
    font-size: 8px;
  }
  .nav-link {
    color: black;
  }
  .active .nav-link {
    color: green;
  }

</style>
